.page-container {
  padding: 24px 32px;
  background: #f5f7fa;
  min-height: calc(100vh - 64px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.page-actions {
  display: flex;
  gap: 12px;
  
  button {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 6px;
    
    span[nz-icon] {
      margin-right: 8px;
    }
  }
}

.custom-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: #fff;
  margin-bottom: 24px;
  
  ::ng-deep .ant-card-head {
    border-bottom: 1px solid #f0f0f0;
    padding: 0 24px;
    min-height: 48px;
    
    .ant-card-head-title {
      font-weight: bold;
      font-size: 16px;
      padding: 12px 0;
    }
  }
  
  ::ng-deep .ant-card-body {
    padding: 24px;
  }
}

.form-group {
  display: flex;
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-item {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: flex-start;
  
  &.full-width {
    flex: 3;
  }
}

.form-label {
  width: 100px;
  text-align: right;
  padding-right: 15px;
  color: #666;
  font-size: 14px;
  line-height: 36px;
  
  &.required::before {
    content: "*";
    color: #ff4d4f;
    margin-right: 4px;
  }
}

.form-control {
  flex: 1;
  
  &.with-button {
    display: flex;
    gap: 8px;
    
    .search-select {
      flex: 1;
    }
  }
}

.search-input,
.search-select,
textarea[nz-input] {
  width: 100%;
  height: 36px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 4px 12px;
  transition: all 0.3s;
  
  &:hover, &:focus {
    border-color: #40a9ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
}

::ng-deep {
  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    height: 36px;
    padding: 0 11px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    transition: all 0.3s;
    
    .ant-select-selection-search-input {
      height: 34px;
    }
    
    .ant-select-selection-item {
      line-height: 34px;
      color: #333;
    }
  }
  
  .ant-select {
    &:hover .ant-select-selector {
      border-color: #40a9ff;
    }
    
    &-arrow {
      color: rgba(0, 0, 0, 0.45);
      font-size: 12px;
      
      .anticon {
        vertical-align: middle;
        transition: transform 0.3s;
      }
    }
    
    &-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
      border-color: #40a9ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
    
    &-open .ant-select-arrow .anticon {
      transform: rotate(180deg);
    }
    
    &-selection-placeholder {
      color: #bfbfbf;
      opacity: 1;
    }
    
    &-clear {
      background-color: #fff;
      color: rgba(0, 0, 0, 0.25);
      
      &:hover {
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
  
  .ant-picker {
    width: 100%;
    border-radius: 4px;
    height: 36px;
    border: 1px solid #e5e7eb;
    background: #fff;
    
    &:hover, &-focused {
      border-color: #40a9ff;
    }
    
    &-focused {
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }
  
  .ant-input-number {
    width: 100%;
    border-radius: 4px;
    height: 36px;
    background: #fff;
    border: 1px solid #e5e7eb;
    
    &-focused {
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
    
    &-handler-wrap {
      border-radius: 0 4px 4px 0;
    }
    
    &-input {
      background: #fff;
    }
  }
  
  // 添加下拉选项样式
  .ant-select-dropdown {
    padding: 4px 0;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08);
    
    .ant-select-item {
      padding: 8px 12px;
      color: #333;
      font-size: 14px;
      line-height: 22px;
      cursor: pointer;
      transition: background 0.3s;
      
      &-option-selected {
        background-color: #e6f7ff;
        color: #1890ff;
        font-weight: 500;
      }
      
      &-option-active:not(.ant-select-item-option-disabled) {
        background-color: #f5f5f5;
      }
      
      &:hover:not(.ant-select-item-option-disabled) {
        background-color: #f5f5f5;
      }
      
      &-empty {
        padding: 8px 12px;
        color: rgba(0, 0, 0, 0.25);
      }
    }
    
    .ant-empty-small {
      margin: 8px 0;
      
      .ant-empty-image {
        height: 40px;
      }
    }
    
    // 下拉框搜索样式
    .ant-select-dropdown-search {
      padding: 8px;
      
      .ant-select-search-input {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        
        &:hover, &:focus {
          border-color: #40a9ff;
        }
        
        &:focus {
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
      }
      
      .ant-input-suffix {
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
  
  // 日期选择器下拉面板样式
  .ant-picker-dropdown {
    .ant-picker-panel-container {
      border-radius: 4px;
      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08);
    }
  }
  
  // 设置按钮样式调整
  .form-control.with-button {
    .setup-btn {
      border-color: #d9d9d9;
    }
  }
}

.search-select-sm {
  width: 100%;
}

textarea[nz-input] {
  height: auto;
  min-height: 80px;
}

.setup-btn {
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  
  &:hover {
    color: #40a9ff;
    border-color: #40a9ff;
    background: #f0f7ff;
  }
}

// 表格区域样式
.table-operations {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  
  button {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    
    span[nz-icon] {
      margin-right: 6px;
    }
  }
  
  .btn-green {
    background: #52c41a;
    border-color: #52c41a;
    color: #fff;
    
    &:hover {
      background: #73d13d;
      border-color: #73d13d;
    }
  }
  
  .btn-red {
    background: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
    
    &:hover {
      background: #ff7875;
      border-color: #ff7875;
    }
    
    &[disabled] {
      background: #f5f5f5;
      border-color: #d9d9d9;
      color: rgba(0, 0, 0, 0.25);
    }
  }
}

.custom-table {
  width: 100%;
  overflow-x: auto;
  
  ::ng-deep {
    .ant-table {
      border-radius: 8px;
      overflow: hidden;
    }
    
    .ant-table-thead > tr > th {
      background: #f0f7ff;
      font-weight: bold;
      padding: 12px 8px;
      color: #333;
      border-bottom: 1px solid #e5e7eb;
      transition: background 0.3s;
      
      &:hover {
        background: #e6f7ff !important;
      }
    }
    
    .ant-table-tbody > tr > td {
      padding: 12px 8px;
      border-bottom: 1px solid #f0f0f0;
      
      &:hover {
        background-color: #f5f7fa;
      }
      
      // 表格内输入框和选择框样式
      .search-input,
      .ant-select-selector,
      .ant-input-number {
        background: #fff;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
      }
      
      .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
        border-color: #40a9ff;
      }
      
      .ant-select-focused:not(.ant-select-disabled) .ant-select-selector {
        border-color: #40a9ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }
    }
    
    .ant-table-tbody > tr:hover > td {
      background-color: #f5f7fa;
    }
  }
}

// 库存单元格样式
.stock-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  &.stock-warning {
    color: #ff4d4f;
  }
  
  .stock-alert {
    color: #ff4d4f;
    margin-left: 8px;
    
    span[nz-icon] {
      font-size: 16px;
    }
  }
}

// 金额单元格样式
.amount-cell {
  font-weight: 500;
  color: #333;
}

.text-right {
  text-align: right;
  font-weight: 500;
}

.fw-bold {
  font-weight: bold;
}

// 上传区域样式
.upload-container {
  width: 100%;
  
  .upload-btn {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
    border-radius: 6px;
    
    span[nz-icon] {
      margin-right: 8px;
    }
    
    &:hover {
      background: #40a9ff;
      border-color: #40a9ff;
    }
  }
  
  .upload-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
  }
  
  .file-list {
    margin-top: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
  }
  
  .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background-color: #f5f7fa;
    }
    
    .file-info {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .file-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        span[nz-icon] {
          font-size: 18px;
          
          &[nzType="file-pdf"] {
            color: #ff4d4f;
          }
          
          &[nzType="file-word"] {
            color: #1890ff;
          }
          
          &[nzType="file-excel"] {
            color: #52c41a;
          }
          
          &[nzType="file-image"] {
            color: #722ed1;
          }
          
          &[nzType="file"] {
            color: #666;
          }
        }
      }
      
      .file-name {
        flex: 1;
        font-size: 14px;
        color: #333;
        max-width: 300px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .file-size {
        font-size: 12px;
        color: #999;
      }
    }
    
    .btn-delete {
      color: #999;
      
      &:hover {
        color: #ff4d4f;
      }
    }
  }
}

// 底部状态信息样式
.status-info {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 16px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .status-item {
    display: flex;
    align-items: center;
    
    .status-label {
      font-weight: 500;
      color: #666;
      margin-right: 8px;
    }
  }
}

// 按钮样式
.btn-gradient {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border: none;
  color: #fff;
  
  &:hover {
    background: linear-gradient(135deg, #40a9ff 0%, #69c0ff 100%);
  }
}

.btn-gray {
  background: #f5f7fa;
  border: 1px solid #e5e7eb;
  color: #666;
  
  &:hover {
    color: #40a9ff;
    border-color: #40a9ff;
  }
}

.btn-blue {
  background: #1890ff;
  border-color: #1890ff;
  color: #fff;
  
  &:hover {
    background: #40a9ff;
    border-color: #40a9ff;
  }
}

.btn-danger {
  color: #ff4d4f;
  border-color: #ff4d4f;
  
  &:hover {
    background: #fff1f0;
  }
  
  &.btn-sm {
    padding: 0 8px;
    height: 28px;
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .form-group {
    flex-wrap: wrap;
    
    .form-item {
      flex: 0 0 calc(50% - 12px);
      min-width: auto;
      margin-bottom: 16px;
      
      &.full-width {
        flex: 0 0 100%;
      }
    }
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 16px;
  }
  
  .form-group {
    .form-item {
      flex: 0 0 100%;
    }
  }
  
  .form-label {
    width: 80px;
    padding-right: 10px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

// 底部操作按钮
.footer-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 32px;
  
  button {
    min-width: 120px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    
    span[nz-icon] {
      margin-right: 8px;
    }
  }
} 

// 自定义警告消息样式
::ng-deep .ant-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1010;
  width: auto;
  max-width: 80%;
  pointer-events: all;
}

::ng-deep .ant-message-notice {
  padding: 0;
  margin: 0;
  text-align: center;
}

::ng-deep .ant-message-notice-content {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  animation: message-zoom-in 0.3s ease-out;
}

::ng-deep .ant-message-warning {
  background-color: #fff9e6;
  border: 1px solid #ffe58f;
  border-radius: 4px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  min-width: 300px;
}

::ng-deep .ant-message-warning .anticon-warning {
  color: #faad14;
  font-size: 24px;
  margin-right: 12px;
}

::ng-deep .ant-message-warning .ant-message-content {
  color: #333;
  font-size: 15px;
  font-weight: 500;
}

@keyframes message-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
} 